<template>
    <view class="register-container">
        <view class="title"><image src="/static/imgs/assets/lanqiao-logo.svg" style="width:200px;height:200px"></image></view>
        <input 
            type="number" 
            v-model="phoneNumber" 
            placeholder="请输入手机号" 
            class="input-field" 
        />
        <input 
            type="text" 
            v-model="username" 
            placeholder="请输入昵称" 
            class="input-field" 
        />
        <input 
            type="password" 
            v-model="password" 
            placeholder="请输入密码" 
            class="input-field" 
        />
        <input 
            type="password" 
            v-model="confirmPassword" 
            placeholder="请再次输入密码" 
            class="input-field" 
        />
        <button @click="register" class="register-button">注册</button>
        <view class="login-link" @click="goToLogin">已有账号？去登录</view>
    </view>
</template>

<script>
	import  config  from '@/config'
export default {
    data() {
        return {
            phoneNumber: '',
            username: '',
            password: '',
            confirmPassword: ''
        };
    },
    methods: {
        goToLogin(){
				uni.navigateTo({
                url: '/pages/login/index' 
            });
			},
        // 生成随机 token 的函数
        generateToken() {
            const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let token = '';
            for (let i = 0; i < 32; i++) {
                token += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            return token;
        },
        register() {
            // 手机号格式验证
            const phoneReg = /^1[3-9]\d{9}$/;
            if (!this.phoneNumber) {
                uni.showToast({
                    title: '手机号不能为空',
                    icon: 'none'
                });
                return;
            }
            if (!phoneReg.test(this.phoneNumber)) {
                uni.showToast({
                    title: '请输入有效的手机号',
                    icon: 'none'
                });
                return;
            }

            // 用户名验证
            if (!this.username) {
                uni.showToast({
                    title: '用户名不能为空',
                    icon: 'none'
                });
                return;
            }

            // 密码验证
            if (!this.password) {
                uni.showToast({
                    title: '密码不能为空',
                    icon: 'none'
                });
                return;
            }
            if (this.password!== this.confirmPassword) {
                uni.showToast({
                    title: '两次输入的密码不一致',
                    icon: 'none'
                });
                return;
            }

            // 生成 token
            const token = this.generateToken();

            // 发起注册请求
            uni.request({
                url: config.API_HOST+'/login',
                method: 'POST',
                data: {
                    phone: this.phoneNumber,
                    username: this.username,
                    password: this.password,
                    token: token
                },
                success: (res) => {
                    if(res){
                        uni.showToast({
                            title: '注册成功',
                            icon:'success'
                        });
                        // 注册成功后跳转到登录页
						
                        setTimeout(() => {
                            uni.navigateTo({
                                url: '/pages/login/index'
                            });
                        }, 3000);
                    }else{
                        uni.showToast({
                            title: '注册失败',
                            icon:'error'
                        });
                    }
                        
                }
            });
        }
    }
};
</script>

<style scoped>
.register-container {
    padding: 0 20px;
}

.title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

.input-field {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
}

.register-button {
    background-color: #007aff;
    color: white;
    height: 50px;
    line-height: 50px;
    border-radius: 5px;
    text-align: center;
    width: 50%;
}
.login-link {
		font-size: 16px;
		color: blue;
		text-decoration: underline;
		text-align: center;
		margin-top: 20px;
		cursor: pointer;
	}
</style>